<script setup>
import { tableOptions } from '@/plugins/vxetable.js'
import { CirclePlusFilled } from '@element-plus/icons-vue'

const search = ref('')
const columns = [
  {
    label: 'Name',
    field: 'name',
    type: 'input',
  },
  {
    label: 'Address',
    field: 'address',
    type: 'input',
  },
  {
    label: 'Date',
    field: 'date',
    type: 'date',
  },
]

function submit() {

}

const demoTableOptions = reactive({
  ...tableOptions(),
  columns: [
    {
      type: 'checkbox',
      width: 60,
      align: 'center',
    },
    {
      type: 'seq',
      width: 60,
      align: 'center',
    },
    {
      title: '任务编号',
      field: 'id',
      align: 'center',
    },
    {
      title: '任务名称',
      field: 'name',
      align: 'center',
    },
    {
      title: '任务地址',
      field: 'address',
      align: 'center',
    },
    {
      title: '任务日期',
      field: 'date',
      align: 'center',
    },
    {
      title: '操作',
      align: 'center',
      width: 100,
    },
  ],
  data: [
    {
      id: 1,
      name: '任务1',
      address: '地址1',
      date: '2022-01-01',
    },
    {
      id: 2,
      name: '任务2',
      address: '地址2',
      date: '2022-01-02',
    },
    {
      id: 3,
      name: '任务3',
      address: '地址3',
      date: '2022-01-03',
    },
  ],
})
</script>

<template>
  <div class="app-container">
    <el-card shadow="never">
      <search-form
        v-model="search"
        :columns="columns"
        label-width="100px"
        @submit="submit"
      />
      <el-divider class="!mb-3" />
      <div>
        <vxe-grid
          v-bind="demoTableOptions"
        >
          <template #toolbar_buttons>
            <el-button type="primary">
              <template #icon>
                <el-icon><CirclePlusFilled /></el-icon>
              </template>
              新增
            </el-button>
            <el-button type="warning">
              <template #icon>
                <svg-icon name="lets-icons:export-fill" class="text-xl relative" />
              </template>
              导出
            </el-button>
          </template>
        </vxe-grid>
      </div>
    </el-card>
  </div>
</template>

<style lang="scss" scoped>

</style>
